<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!--
        Vue模板语法有2大类：
            1.插值语法:
                功能：用于解析标签内容
                写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
            2.指令语法：
                功能：用于解析标签(包括：标签属性，标签体内容，绑定事件....)
                举例：v-bind:href="xxx" 或 简写为 :href="xxx" ,xxx同样为js表达式
                    且可以直接读取到data中的所有属性
                备注：Vue中有很多指令，且形式都是v-????,此处我们只是拿v-bind来进行举例
    -->

    <div id="root">
        <h1>插值语法</h1>
        <h2>hello ,{{name}}</h2>
        <hr/>
        <h1>指令语法</h1>
        <a v-bind:href="url">go study01</a><br/>
        <a :href="school.name">go study02</a>    <!-- v-bind:href=""   可以进行简写 :href="" -->
    </div>


    <script type="text/javascript">
        const x = new Vue({
            el:'#root',
            data() {
                return {
                    name:'jack',
                    url:'https://bilibili.com',
                    school:{
                        name:'江西理工大学'
                    }
                }
            },
        })


    </script>


    
</body>
</html>